<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Demo a2hs.js</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background: linear-gradient(to top left, #9198e5, #e66465);
        color: white;
        box-sizing: border-box;
      }
      h1,
      .wrapper {
        font-weight: lighter;
      }
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, sans-serif;
        width: 100%;
        height: 100%;
      }
      .wrapper .item {
        max-width: 80%;
      }
      .a2hs__container {
        animation: slideUp 0.7s ease;
      }
      @keyframes slideUp {
        0% {
          opacity: 0;
          transform: translateY(240px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item">
        <h1>Demo a2hs.js</h1>
        <p>
          A useful modern JavaScript solution that helps your website users to
          add (install) a progressive web application (PWA) to the Home screen
          of their mobile iOS device.
        </p>
        <p>Designed for the latest 4 major versions of iOS Safari 9.x-12.2+.</p>
        <p>
          <a
            class="github-button"
            href="https://github.com/koddr/a2hs.js"
            data-size="large"
            data-show-count="true"
            aria-label="Star koddr/a2hs.js on GitHub"
          >
            Star
          </a>
        </p>
      </div>
    </div>
    <script defer src="./index.js"></script>
    <script async defer src="https://buttons.github.io/buttons.js"></script>
  </body>
</html>
